<template>
  <div class="translation">
    <div class="container">
      <div class="translation-content">
        <!-- 侧边栏 -->
        <div class="sidebar">
          <div class="category-list">
            <h3>file_id</h3>
            <div>
              <input
                  v-model="filterText"
                  placeholder="输入file_id过滤"
              />
            </div>
            <ul>
              <li v-for="item in filteredItems" :key="item"
                  :class="{ active: selectedCategory === item }" @click="setUID(item)">
                <span>{{ item }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 主内容区 -->
        <div class="main-content">
          <div class="translation-container">
            <div class="text-box-container">
              <div class="text-column">
                <label for="sourceText">原文</label>
                <textarea
                    id="sourceText"
                    :value="sourceText"
                    placeholder="原文内容"
                    readonly
                ></textarea>
              </div>
              <div class="text-column">
                <label for="translatedText">译文（编辑保存功能尚未开发，后续完善，仅供预览）</label>
                <textarea
                    id="translatedText"
                    :value="sourceTranslated"
                    placeholder="译文内容将来可编辑保存"
                ></textarea>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 通知提示组件 -->
    <div class="notification-container">
      <div v-for="notification in notifications" :key="notification.id" :class="['notification', notification.type]"
           @click="removeNotification(notification.id)">
        <div class="notification-content">
          <strong>{{ notification.title }}</strong>
          <p>{{ notification.message }}</p>
        </div>
        <div class="notification-progress" :style="{ width: notification.progress + '%' }"></div>
      </div>
    </div>
  </div>
</template>

<script>
import translation from '@/assets/scripts/translation_v2.js';

export default translation;
</script>

<style scoped src="@/assets/style/translation.css"/>